<template>
	<view :style="{backgroundColor:bgColor  }">
		<view class="topnav">
			<uni-nav-bar :title="item.title" leftIcon="left" @clickLeft="clickLeft"
				rightIcon="gear-filled" @clickRight="open" :backgroundColor="bgColor" :color="color"></uni-nav-bar>
		</view>
		<view class="contentBox">
			<view class="content" style="line-height: 38px;word-spacing: 1rem;" :style="{fontSize: textSize + 'px','color':color }">
				<p v-for="(item,index) in dataList" :key="index" v-html="item"></p>
			</view>
			<view class="next">
				<view class="" @click="checkPreChapter" v-show="prePage" >
					<text :style="{fontSize: textSize + 'px','color':color }">上一章</text>
				</view>
				<view class="" @click="checkChapter" v-show="nextPage">
					<text :style="{fontSize: textSize + 'px','color':color }"> 下一章</text>
				</view>
			</view>
		</view>
			<uni-popup ref="popup" type="bottom">
				<view class="setting">
					<view class="textSizeBox">
						<view class="chapters">
							<text>字号</text>
						</view>
						<view class="">
							<text class="size" @click="changeSize(-1)">-</text>
							&nbsp;&nbsp;&nbsp;&nbsp;
							<text class="size" @click="changeSize(1)">+</text>
						</view>
					</view>
					<view class="outherBox">
						<view class="chapters" @click="openDrawer">
							<text>目录</text>
						</view>
						<view class="colorBox">
							<view style='background-color: #000;color: #b9b9b9;'  @click.once="changeTextColor('#000','#b9b9b9')">
								黑
							</view>
							<view style="background-color: #fff;color:#353535 ;"  @click.once="changeTextColor('#ffffff','#353535')">
								白
							</view>
							<view style="background-color: #baba00;color:#c8c8c8 ;" @click.once="changeTextColor('#baba00','#c8c8c8')">
								黄
							</view>
							<view style="background-color: #00a550;color:#d3d3d3 ;" @click.once="changeTextColor('#00a550','#d3d3d3')">
								绿
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
		<view class="unidrawerBox">
			<uni-drawer ref="showRight" mode="right">
				<scroll-view style="height: 100%;" scroll-y="true" :show-scrollbar="true">
					<view class="chapter" style="padding-top: 20rpx; "  @click="search(item)" v-for="(item,index) in chapters" :key="index">
						<view class="">
							{{item.title}}
						</view>
					</view>
				</scroll-view>
			</uni-drawer>
		</view>
		<view class="systemBox">
			<view class="systemInfo">
				<view class="timeInfo">
					{{timeHour}}
				</view>
				<view class="">
					{{item.title}}
				</view>
				<view class="wifiInfo">
					<view class="">
						{{networkType}}
					</view>
					<view class="dianliang">
						{{dianliang}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as DB from "@/compoment/DB.js"
	export default {
		data() {
			return {
				dataList: [],
				textSize:25,
				color:"black",
				bgColor:"white",
				item:{},
				fictionId:undefined,
				chapters:[],
				nextChapter:undefined,
				nextPage:true,
				preChapter:undefined,
				prePage:false,
				dbName:"uu_chapterContent",
				timeHour:"",
				networkType:"",
				dianliang:undefined,
				clearTime:0
			}
		},
		beforeDestroy() {
			clearInterval(this.clearTime)
			
		},
		onLoad(option) {
			 plus.navigator.setFullscreen(true);
			this.item = JSON.parse(option.item)
			this.fictionId = option.fictionId
			this.searchContent()
			this.loadChapters() 
			this.getNetWorkType()
			this.getTime()
			this.getKwh()
		},
		onPullDownRefresh() {
			this.searchContent()
			this.loadChapters() 
		},
		onShow() {
			DB.find("uu_setting",{"name":"bgc"}).then((res)=>{
				if(res[0] && res[0].value){
					let obj = JSON.parse(res[0].value)
					this.bgColor = obj.bgColor
					this.color = obj.color
					this.textSize = obj.testSize
				}
			})
		},
		onUnload() {
			 plus.navigator.setFullscreen(false);
		},
		methods: {
			getTime(){
				setInterval(()=>{
					let date = new Date();
					let hours = date.getHours()
					let mi = date.getMinutes()
					let s = date.getSeconds()
					this.timeHour = hours +":"+mi
				},10000)
			},
			getNetWorkType(){
				uni.getNetworkType({
					success: (res) => {
						this.networkType = res.networkType
					}
				})
			},
			getKwh(){
				 // 获取电量信息
				uni.getBatteryInfo({
					success: (res) => {
						this.dianliang = res.level
					}
				})
			},
			clickLeft() {
				uni.navigateBack()
			},
			open() {
				this.$refs.popup.open('bottom') 
			},
			openDrawer(){
				this.$refs.showRight.open();
			},
			changeTextColor(bg,tc){
				this.bgColor = bg
				this.color = tc
				let obj = {"bgColor":bg,"color":tc}
				DB.find("uu_setting",{"name":"bgc"}).then((res)=>{
					if(res.length==0){
						DB.insert("uu_setting",{"name":"bgc","value":JSON.stringify(obj)}).then(()=>{
							console.log("成功")
						})
					}else{
						DB.update("uu_setting",{"name":"bgc","value":JSON.stringify(obj)},"id =" +res[0].id)
					}
				})
				
			},
			changeSize(i){
				this.textSize=this.textSize+i
				if(this.textSize<15){
					this.textSize = 15
				}
				if(this.textSize>35){
					this.textSize=35
				}
				DB.find("uu_setting",{"name":"bgc"}).then((res)=>{
					if(res.length==0){
						let obj ={"textSize":this.textSize}
						DB.insert("uu_setting",{"name":"bgc","value":JSON.stringify(obj)}).then(()=>{
							console.log("成功")
						})
					}else{
						let obj =JSON.parse(res[0].value) 
						obj.testSize = this.textSize;
						DB.update("uu_setting",{"name":"bgc","value":JSON.stringify(obj)},"id =" +res[0].id)
					}
				})
			},
			search(item){
				this.item = item
				this.searchContent()
			},
			searchContent() {
				uni.pageScrollTo({
					scrollTop: 0
				});
				uni.setStorageSync(this.fictionId,this.item)
				let chapterId = this.item.chapterId
				DB.selectContent(this.dbName,{'chapterId':chapterId}).then((res)=>{
					if(!res[0]){
						uni.request({
							url: `http://api.pingcc.cn/fictionContent/search/${chapterId}`,
							method: "GET",
							success: ({
								data
							}) => {
								if(data.data){
									this.dataList = data.data
									DB.insert(this.dbName,{'chapterId':chapterId,"content":JSON.stringify(this.dataList) })
								}else{
									this.dataList = ["暂无数据"]
								}
							}
						})
					}else{
						this.dataList = JSON.parse(res[0].content) 
					}
					this.cacheChapterContent()
				})
				this.getKwh()
				uni.stopPullDownRefresh()
				
			},
			loadChapters(){
				DB.selectBookAll("uu_bookChapter",this.fictionId).then((res)=>{
					this.chapters = res
					this.getNextChapterId(this.chapters,this.item.chapterId)
				}).catch(()=>{
					
				})
			},
			checkChapter(){
				this.item = this.nextChapter
				this.searchContent()
				this.getNextChapterId(this.chapters,this.item.chapterId)
			},
			checkPreChapter(){
				this.item = this.preChapter
				this.searchContent()
				this.getNextChapterId(this.chapters,this.item.chapterId)
			},
			getNextChapterId(chapterList,currentId){
				for(let i =0;i<chapterList.length;i++){
					if(chapterList[i].chapterId == currentId){
						this.nextChapter = chapterList[i+1]
						this.preChapter = chapterList[i-1]
						if(this.preChapter){
							this.prePage = true
						}
						if(i+1 == chapterList.length){
							this.nextPage = false
						}
						break;
					}
				} 
			},
			//缓存下一章内容到数据库
			 cacheChapterContent(){
				 let nextChapter = undefined
				let chapters = this.chapters
				for(let i =0;i<chapters.length;i++){
					if(chapters[i].chapterId == this.item.chapterId){
						nextChapter = chapters[i+1]
						break;
					}
				} 
				 DB.find(DB.config.tables.uu_chapterContent,{"chapterId":nextChapter.chapterId}).then( (res)=>{
					if(res[0]){
						return false
					}else{
						 uni.request({
							url:`http://api.pingcc.cn/fictionContent/search/${nextChapter.chapterId}`,
							success: ({data}) => {
								DB.insert(DB.config.tables.uu_chapterContent,{'chapterId':nextChapter.chapterId,"content":JSON.stringify(data.data) }).then(()=>{
									uni.showToast({
										title:"缓存成功"
									})
								}).catch(()=>{
									uni.showToast({
										title:"缓存失败"
									})
								})
							}
						})
					}
				}).catch((err)=>{
					console.log(err)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.contentBox{
		padding-bottom: 50px;
	}
	.setting{
		height: 200rpx;
		background-color: aliceblue;
		font-size: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.setting view{
		margin-left: 10rpx;
	}
	.next{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	.next>view{
		padding: 5rpx 10px;
	}
	.textSizeBox{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.size{
		font-size: 30px;
	}
	.chapters{
		width: 200rpx;
	}
	.outherBox{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	.colorBox{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.colorBox view{
		padding: 10rpx 15px;
		font-size: 20rpx;
	}
	.chapter{
		padding: 10px 20rpx;
	}
	.systemBox{
		position: fixed;
		bottom: 0px;
		font-size: 20rpx;
		font-weight: 300;
		background-color: #e3e3e3;
		width: 750rpx;
	}
	.systemInfo{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-content: center;
		padding: 2rpx 20rpx;
	}
	.wifiInfo{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-content: center;
	}
	.wifiInfo view{
		padding-right: 10rpx;
	}
	.dianliang{
		border: 1px solid red;
		height: 12rpx;
		font-size: 4rpx;
		margin-top: 5rpx;
		padding: 1rpx 0px;
		background-color: greenyellow;
	}
</style>
